@rootSize: 37.5rem;

body {
    background-color: #f8f8f8;
}

.top {
    height: (94 / @rootSize);
    align-items: center;
    display: flex;
    background-color: #fff;
    justify-content: space-between;

    p {
        font-size: (13 / @rootSize);
        color: #000;
        margin-left: (15 / @rootSize);
    }

    .sousuoinput {
        position: relative;
        border-radius: (20 / @rootSize);
        width: (252 / @rootSize);
        height: (32 / @rootSize);
        background-color: #f7f7f7;

        p {
            position: absolute;
            left: 0;
            top: (8 / @rootSize);
            margin-left: (16 / @rootSize);
            display: inline-block;
            width: (13 / @rootSize);
            height: (13 / @rootSize);

            img {
                width: 100%;
                object-fit: cover;
            }
        }

        input {
            vertical-align: top;
            margin-top: (8 / @rootSize);
            background-color: #f7f7f7;
            padding-left: (42 / @rootSize);
            font-size: (12 / @rootSize);

            &::placeholder {
                color: #a6a6a6;
                font-size: (12 / @rootSize);
            }
        }
    }

    .pic {
        margin-right: (15 / @rootSize);

        img {
            width: (18 / @rootSize);
            height: (18 / @rootSize);
            margin-bottom: (10 / @rootSize);
            object-fit: cover;
        }
    }
}

.box {
    padding: 0 (15 / @rootSize);

    .pic {
        height: (130 / @rootSize);
        width: 100%;

        img {
            width: 100%;
            object-fit: cover;
        }
    }

    .dian {
        align-items: center;
        justify-content: center;
        display: flex;
        height: (18 / @rootSize);
        width: 100%;

        p {
            width: (6 / @rootSize);
            height: (3 / @rootSize);
            border-radius: (2 / @rootSize);
            background-color: #dfdfdf;
            margin-left: (8 / @rootSize);
        }

        .dian-p {
            background-color: #303030;
        }
    }

    .liangzhangtu {
        margin-top: (12 / @rootSize);
        display: flex;
        justify-content: space-between;

        .pic {
            height: (70 / @rootSize);
            width: (168 / @rootSize);
            box-shadow: 0 0 (5 / @rootSize) rgba(0, 0, 0, .1);

            img {
                width: 100%;
                object-fit: cover;
            }
        }
    }

    .youhui {
        .shang {
            margin-top: (30 / @rootSize);
            margin-bottom: (20 / @rootSize);
            height: (38 / @rootSize);
            display: flex;
            width: 100%;
            justify-content: space-between;

            .chaozhi {
                font-size: (18 / @rootSize);
                font-weight: 800;
                padding-top: (6 / @rootSize);
                color: #000;
            }

            .pic {
                width: (10 / @rootSize);
                height: (14 / @rootSize);

                img {
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .xia {
            display: flex;
            justify-content: space-between;
            margin-bottom: (30 / @rootSize);

            .zufang {
                .yupian {
                    height: (116 / @rootSize);
                    width: (169 / @rootSize);

                    img {
                        width: 100%;
                        object-fit: cover;
                    }
                }

                h4 {
                    margin-top: (13 / @rootSize);
                    font-size: (13 / @rootSize);
                    color: #000;
                }

                .chaoyangqv {
                    margin-top: (8 / @rootSize);
                    font-size: (12 / @rootSize);
                    color: #9d9d9d;
                }

                .mian {
                    margin-top: (10 / @rootSize);
                    font-size: (13 / @rootSize);
                    color: #f5aa2a;
                }
            }
        }
    }

    .guanggao {
        margin-bottom: (32 / @rootSize);
        width: 100%;
        height: (56 / @rootSize);

        img {
            width: 100%;
            object-fit: cover;
        }
    }

    .liebaio {
        .tou {
            margin-top: (30 / @rootSize);
            margin-bottom: (24 / @rootSize);
            height: (42 / @rootSize);
            display: flex;
            width: 100%;
            justify-content: space-between;

            .chaozhi {
                font-size: (18 / @rootSize);
                font-weight: 800;
                padding-top: (6 / @rootSize);
                color: #000;
            }

            .you {
                display: flex;
                justify-content: end;
                font-size: (14 / @rootSize);

                .ziti {
                    position: relative;
                    height: (22 / @rootSize);
                    width: (28 / @rootSize);

                    .zhengzu {
                        margin-top: (10 / @rootSize);
                        color: #474646;

                        &.zheng {
                            color: #a5a5a5;
                        }
                    }

                    .xiahuaxian {
                        position: absolute;
                        top: (29 / @rootSize);
                        left: (9 / @rootSize);
                        width: (9 / @rootSize);
                        height: (4 / @rootSize);
                        border-radius: (3 / @rootSize);
                        background-color: #0a9beb;
                    }

                    &.zitizi {
                        margin-right: (18 / @rootSize);
                    }

                    &.zitiziti {
                        margin-right: (27 / @rootSize);
                    }
                }
            }
        }

        .jiao {
            margin-bottom: (22 / @rootSize);
            display: flex;
            justify-content: space-between;

            .left {
                width: (112 / @rootSize);
                height: (82 / @rootSize);

                img {
                    width: 100%;
                    object-fit: cover;
                }
            }

            .ritht {
                flex: 1;
                margin-left: (16 / @rootSize);

                h4 {
                    font-size: (13 / @rootSize);
                    color: #000;
                }

                .sins-line {
                    width: (220 / @rootSize);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                p {
                    margin-top: (6 / @rootSize);
                    font-size: (12 / @rootSize);
                    color: #b8b8b8;

                    span {
                        margin: 0 (4 / @rootSize);
                    }
                }

                .yangtai {
                    color: #c4c4c4;
                    font-size: (12 / @rootSize);

                    span {
                        margin-top: (6 / @rootSize);
                        display: inline-block;
                        width: (47 / @rootSize);
                        height: (16 / @rootSize);
                        line-height: (16 / @rootSize);
                        text-align: center;
                        border: 1px solid #c4c4c4;
                        border-radius: (5 / @rootSize);

                        &.hanyangtai {
                            margin-left: (10 / @rootSize);
                        }
                    }
                }

                h5 {
                    margin-top: (6 / @rootSize);
                    font-size: (13 / @rootSize);
                    color: #f4a828;

                    .yve {
                        font-size: (12 / @rootSize);
                        margin-left: (1 / @rootSize);
                    }
                }
            }
        }
    }

    .bainkuang {
        width: (260 / @rootSize);
        height: (38 / @rootSize);
        background-color: #f2f2f3;
        border-radius: (20 / @rootSize);
        margin: 0 auto;

        p {
            font-size: (12 / @rootSize);
            color: #aaaaaa;
            height: (38 / @rootSize);
            line-height: (38 / @rootSize);
            text-align: center;
        }
    }

    .xiatupian {
        margin-top: (24 / @rootSize);
        margin-bottom: (62 / @rootSize);
        width: 100%;
        height: (85 / @rootSize);

        img {
            width: 100%;
            object-fit: cover;
        }
    }
}

.foot {
    background-color: #fff;
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: 0;
    width: 100%;
    height: (50 / @rootSize);
    border-top: 2px solid #f4f3f3;

    ul {
        height: (50 / @rootSize);
        display: flex;
        justify-content: space-around;

        li {
            height: (50 / @rootSize);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #c7c7c7;

            p {
                width: (20 / @rootSize);
                height: (20 / @rootSize);
                font-size: (20 / @rootSize);
            }

            h3 {
                font-weight: normal;
                margin-top: (5 / @rootSize);
                font-size: (12 / @rootSize);
            }
        }

        .shouye {
            color: #000 !important;
        }
    }
}